<script setup>
import { reactive, ref, onMounted, nextTick } from 'vue'
import { myConfrim } from '@/utils'
import { getBuildListApi, getStoryListApi } from '@/api/build'
import { getRoomListApi } from '@/api/setCode'
import { deleteBedApi } from '@/api/mybed'
import { getListForAssignApi } from '@/api/classes'
import { getClassByClassIdApi } from '@/api/student'
import { saveSelectBedApi } from '@/api/setAssign'

// 楼栋id
const storeyId = ref('')
// 楼栋列表
const buildList = ref([])
// 层数列表
const storyList = ref([])
// 班级列表
const classList = ref([])
// 班级id
const classId = ref('')
// 学生列表
const studentList = ref([])
// 学生id
const stuId = ref([])
// 床位id
const bedId = ref('')
// 楼栋点击颜色切换
const isChange = ref(0)
// 层数点击颜色切换
const isDestory = ref(0)
const leftHeight = ref(0)
const rightHeight = ref(0)
// 分页查询对象
const listParm = reactive({
    storeyId: '',
    currentPage: 1,
    pageSize: 10,
    total: 0
})
// 表格高度
const tableHeight = ref(0)
// 表格数据
const tableData = ref([])
// 新增入住信息弹窗
const addDialog = reactive({
    title: '',
    width: 650,
    visible: false,
    height: 360
})

const getHasNum = (children) => {
    let num = 0
    if (children && children.length > 0) {
        for (let i = 0; i < children.length; i++) {
            // 名字不为空说明床位已经被选了
            if (children[i].stuId) {
                num++
            }
        }
    }
    return num
}

onMounted(() => {
    leftHeight.value = window.innerHeight - 230
    rightHeight.value = window.innerHeight - 230
    tableHeight.value = window.innerHeight - 230
})

// 获取表格数据
const getList = async () => {
    let res = await getRoomListApi(listParm)
    if (res) {
        tableData.value = res.data.records
        listParm.total = res.data.total
    }
}
// 获取楼栋列表
const getBuildList = async () => {
    let res = await getBuildListApi()
    if (res) {
        buildList.value = res.data
        // 点击到第一个楼栋
        nextTick(() => {
            document.querySelector('#build0').click()
        })
    }
}
getBuildList()
// 获取层数列表
const getStoryList = async (buildId) => {
    let res = await getStoryListApi({
        buildId
    })
    if (res) {
        storyList.value = res.data
        nextTick(() => {
            document.querySelector('#storey0').click()
        })
    }
}
// 获取班级列表
const getListForAssign = async () => {
    let res = await getListForAssignApi()
    if (res) {
        classList.value = res.data
    }
}
// 楼栋点击事件
const btnClick = (buildId, index) => {
    isChange.value = index
    isDestory.value = 0
    getStoryList(buildId)
}
// 层数点击事件
const storyClick = (storyId, index) => {
    isDestory.value = index
    storeyId.value = storyId
    listParm.storeyId = storyId
    // 获取对应的表格数据
    getList()
}
// 分页大小改变事件
const sizeChange = (size) => {
    listParm.pageSize = size
    listParm.currentPage = 1
    getList()
}
// 当前选中页改变事件
const currentChange = (page) => {
    listParm.currentPage = page
    getList()
}
// 删除入住学生事件
const deleteBtn = async (bed) => {
    let confirm = await myConfrim('确定删除该入住学生吗？')
    if (confirm) {
        let res = await deleteBedApi({
            stuId: bed.stuId,
            bedId: bed.bedId
        })
        if (res) {
            ElMessage({
                message: res.msg,
                type: 'success',
            })
            getList()
        }
    }
}
// 获取班级下面的学生列表
const selectStu = async (val) => {
    let res = await getClassByClassIdApi({
        classId: val
    })
    if (res) {
        studentList.value = res.data
    }
}
// 添加入住学生事件
const addBtn = (bed) => {
    // 保存当前选择的床位id
    bedId.value = bed.bedId
    // 清空上一次的数据
    classId.value = ''
    classList.value = []
    stuId.value = []
    studentList.value = []
    getListForAssign()
    addDialog.title = '分配宿舍'
    addDialog.visible = true
}
// 弹窗确认
const onConfirm = async () => {
    let parm = {
        bedId: bedId.value,
        stuId: stuId.value[0]
    }
    let res = await saveSelectBedApi(parm)
    if (res) {
        ElMessage({
            message: res.msg,
            type: 'success',
        })
        getList()
        addDialog.visible = false
    }
}
// 弹窗取消
const onClose = () => addDialog.visible = false
const filterMethod = (query, item) => item.stuName.indexOf(query) > -1

const btnChange = (select, index) => {
    let item = stuId.value
    if (item.length > 0) {
        for (let i = 0; i < item.length; i++) {
            for (let j = 0; j < select.length; j++) {
                if (item[i] !== select[j]) {
                    item.splice(i, 1)
                }
            }
        }
    }
}

const leftChange = (item, index) => {
    if (item.length > 0) {
        for (let i = 0; i < item.length; i++) {
            for (let j = 0; j < index.length; j++) {
                if (item[i] !== index[j]) {
                    item.splice(i, 1)
                }
            }
        }
    }
}
</script>

<template>
    <div class="build-list">
        <div class="build-item" :id="'build' + index" @click="btnClick(item.buildId, index)"
            v-for="(item, index) in buildList" :key="index" :class="{ isActive: isChange === index }">
            <div>
                <span>
                    {{ item.buildName }}
                </span>
                (<span v-if="item.sex === '0'">男</span>
                <span v-if="item.sex === '1'">女</span>)
            </div>
        </div>
    </div>

    <el-container class="containers">
        <el-aside :style="{ height: leftHeight + 'px' }" class="leftAsside" width="180px">
            <div @click="storyClick(item.storeyId, index)" :class="{ destoryActive: isDestory === index }"
                :id="'storey' + index" class="story-item" v-for="(item, index) in storyList" :key="index">
                {{ item.storeyName }}
            </div>
        </el-aside>
        <el-main class="mains">
            <!-- 床位列表 -->
            <el-collapse style="overflow-y: auto;" :style="{ height: tableHeight + 'px' }">
                <el-collapse-item class="collapse-main" v-for="(item, index) in tableData" :key="index">
                    <template #title class="room-title-header">
                        <span class="room-title">{{ item.roomCode }}宿舍</span>
                        <span class="room-type" v-if="item.roomType === '1'">1人间</span>
                        <span class="room-type" v-if="item.roomType === '2'">2人间</span>
                        <span class="room-type" v-if="item.roomType === '4'">4人间</span>
                        <span class="room-type" v-if="item.roomType === '6'">6人间</span>
                        <span class="room-type" v-if="item.roomType === '8'">8人间</span>
                        <span class="room-type">
                            (共{{ item.totalBed }}个床位,已入住{{ getHasNum(item.bedList) }}人)
                        </span>
                    </template>
                    <!-- 床位列表 -->
                    <div class="bedList">
                        <div class="bed-item" v-for="(bed, bindex) in item.bedList" :key="bindex">

                            <div v-if="bed.stuId" class="bed-item-active">
                                <div class="name-icon">
                                    <div class="num-text">
                                        {{ bed.bedCode }}
                                    </div>
                                    <el-icon style="color:#ff7670;font-size: 14px; user-select: none; cursor: pointer;"
                                        @click="deleteBtn(bed)">
                                        <Delete />
                                    </el-icon>
                                </div>
                                <div class="bed-main">
                                    <SvgIcon class="bed-svg" name="user" />
                                    <div class="stuInfo">
                                        <div>
                                            <div>
                                                <span>姓名:</span>
                                                <span>{{ bed.stuName }}</span>
                                            </div>
                                            <div>
                                                <span>班级:</span>
                                                <span>{{ bed.className }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div v-else>
                                <div class="name-icon">
                                    <div class="num-text">
                                        {{ bed.bedCode }}
                                    </div>
                                    <el-icon style="color:#5fb878;font-size: 14px; user-select: none; cursor: pointer;"
                                        @click="addBtn(bed)">
                                        <Plus />
                                    </el-icon>
                                </div>
                                <div class="bed-main">
                                    <SvgIcon class="bed-svg" name="user" />
                                    <div class="stuInfo">
                                        <div>
                                            <div style="color: #aeb5b5;">
                                                暂未入住
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>

            <!-- 分页 -->
            <el-pagination @size-change="sizeChange" @current-change="currentChange"
                :current-page.sync="listParm.currentPage" :page-sizes="[10, 20, 40, 80, 100]" :page-size="listParm.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="listParm.total">
            </el-pagination>
        </el-main>
    </el-container>

    <el-dialog v-model="addDialog.visible" :width="addDialog.width" :close-on-click-modal="false">
        <template #header>
            <h1>{{ addDialog.title }}</h1>
        </template>
        <div :style="{ height: addDialog.height + 'px' }" style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
            <el-form :inline="true" size="small">
                <el-form-item label="班级">
                    <el-select @change="selectStu" style="width: 100%;" v-model="classId" placeholder="请选择班级">
                        <el-option v-for="item in classList" :key="item.classId" :label="item.className"
                            :value="item.classId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <el-transfer v-model="stuId" :data="studentList" :props="{ key: 'stuId', label: 'stuName' }" filterable
                :filter-method="filterMethod" filter-placeholder="请输入姓名" @left-check-change="leftChange"
                @change="btnChange">
            </el-transfer>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onClose">取消</el-button>
                <el-button type="primary" @click="onConfirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style scoped>
.name-icon {
    display: flex;
    justify-content: space-between;
    padding: 5px;
}

.build-list {
    display: flex;
    flex-wrap: wrap;
}

.build-item {
    padding: 8px 30px;
    margin: 10px;
    font-size: 14px;
    border: 1px solid #dedede;
    border-radius: 4px;
    cursor: pointer;
    background: #f8f8f8;
}

.isActive {
    background: #42b983;
    color: #fff;
}

.containers {
    margin-top: 20px;
    border: 1px solid #dcdfe6;
}

.leftAsside {
    border-right: 1px solid #dcdfe6;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.story-item {
    padding: 8px 30px;
    margin: 10px;
    font-size: 14px;
    border: 1px solid #dedede;
    border-radius: 4px;
    cursor: pointer;
    background-color: #f8f8f8;
}

.destoryActive {
    background: #5fb878;
    border-color: #5fb878;
    color: #fff;
}

.mains {
    padding-top: 10px;
}

.room-title {
    padding-left: 15px;
    color: #5fb878;
    font-size: 13px;
    font-weight: 600;
    flex-grow: 1;
}

.bed-svg {
    font-size: 100px;
}

.active-num-text {
    color: #42b983;
    font-weight: 600;
}

.num-text {
    color: #8a8a8a;
}

.bed-item-active {
    background: #f2feff;
    border: 1px solid #ddeff1;
    border-radius: 4px;
    height: 180px;
    width: 180px;
    display: flex;
    flex-direction: column;
}

.bed-item {
    border: 1px solid #dedede;
    border-radius: 4px;
    background-color: #f8f8f8;
    height: 180px;
    width: 180px;
    margin: 15px;
    display: flex;
    flex-direction: column;
}

.bed-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.room-type {
    color: #ff7670;
    flex-grow: 1;
}

.bedList {
    display: flex;
    flex-wrap: wrap;
}

.stuInfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.collapse-main {
    background: #f8f8f8;
    border: 1px solid #dcdfe6;
    margin: 5px 0px;
}

.room-title-header {
    display: flex;
    background: #f8f8f8;
}
</style>